<template>
  <div class="home">
    <div class="pageindex">
      <router-view></router-view>
      <div style="height:1.2rem"></div>
    </div>
    <div class="navbar">
      <ul class="nav-menu">
        <li class="menu-item" @click="tab(0)">
          <router-link to="homepage" class="link">
            <img src="/static/img/tab_home_hig.png" :class="{picIcon:true,hide:showid!=0}" />
            <img src="/static/img/tab_home_nor.png" :class="{picIcon:true,hide:showid==0}" />
            <p :class="{active:showid==0}">首页</p>
          </router-link>
        </li>
        <li class="menu-item" @click="tab(1)">
          <router-link to="classify" class="link">
            <img src="/static/img/tab_menu_hig.png" :class="{picIcon:true,hide:showid!=1}" />
            <img src="/static/img/tab_menu_nor.png" :class="{picIcon:true,hide:showid==1}" />
            <p :class="{active:showid==1}">分类</p>
          </router-link>
        </li>
        <li class="menu-item" @click="tab(2)">
          <router-link to="mall" class="link">
            <img src="/static/img/tab_shopping_hig.png" :class="{picIcon:true,hide:showid!=2}" />
            <img src="/static/img/tab_shopping_nor.png" :class="{picIcon:true,hide:showid==2}" />
            <p :class="{active:showid==2}">购物车</p>
          </router-link>
        </li>
        <li class="menu-item" @click="tab(3)">
          <router-link to="mine" class="link">
            <img src="/static/img/tab_me_hig.png" :class="{picIcon:true,hide:showid!=3}" />
            <img src="/static/img/tab_me_nor.png" :class="{picIcon:true,hide:showid==3}" />
            <p :class="{active:showid==3}">我的</p>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      showid: 0
    }
  },
  methods: {
    tab (num) {
      window.localStorage.a = num
      this.showid = window.localStorage.a
    }
  },
  created () {
    console.log(window.localStorage.a) // 0
    this.showid = window.localStorage.a
  }
}
</script>

<style lang="stylus">
.home {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .main {
    flex: auto;
  }

  .navbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    flex: 0 0 1.2077rem;
    background-color: #f6f6f6;

    .nav-menu {
      display: flex;
      height: 1.3rem;

      .menu-item {
        flex: auto;
        line-height: 0.5rem;
        text-align: center;

        .link {
          display: block;
          padding: 0.066667rem;
          width: 100%;
          height: 100%;
          color: #666;
          box-sizing: border-box;

          .hide {
            display: none;
          }

          .active {
            color: #ff9900;
          }

          .picIcon {
            width: 0.4rem;
            height: 0.4rem;
            margin-top: 0.2rem;
          }

          i {
            vertical-align: bottom;
            font-size: 0.5797rem;
          }

          p {
            margin: 0.026667rem 0 0 0;
            font-size: 0.2899rem;
          }
        }
      }
    }
  }
}
</style>
